<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button
        @click="generateQRCode"
        type="primary"
        size="mini"
        icon="el-icon-upload2"
      >
        一键生成座位二维码
      </el-button>
      <el-button
        @click="exportData"
        type="primary"
        size="mini"
        icon="el-icon-download"
      >
        下载座位二维码
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="seat.seaNum" label="座位号" width="50" />
      <el-table-column prop="floor.floNum" label="楼层号" width="50" />
      <el-table-column prop="seat.seaPicture" label=" 座位图" min-width="30%">
        <!-- 图片的显示 -->
        <template slot-scope="scope">
          <img :src="scope.row.seat.seaPicture" min-width="70" height="70" />
        </template>
      </el-table-column>
      3
      <el-table-column prop="seat.seaCrcode" label="座位图" min-width="30%">
        <!-- 图片的显示 -->
        <template slot-scope="scope">
          <img :src="scope.row.seat.seaCrcode" min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column prop="seatStateComment" label="座位状态" width="100" />

      <el-table-column prop="seat.seaId" label="座位状态切换">
        <template slot-scope="scope">
          <el-switch
            v-if="
              scope.row.seatStateComment == '可预约' ||
              scope.row.seatStateComment == '已预约'
            "
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="不可预约"
            inactive-text="可预约"
            v-model="scope.row.isOpen"
            :active-value="1"
            :inactive-value="0"
            @change="change(scope.row)"
          ></el-switch>
          <el-switch
            v-if="scope.row.seatStateComment == '不可预约'"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="可预约"
            inactive-text="不可预约"
            v-model="scope.row.isOpen"
            :active-value="1"
            :inactive-value="0"
            @change="change(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import integralGradeAPi from '@/api/core/integral-grade'
export default {
  data() {
    return {
      BASE_API: process.env.VUE_APP_BASE_API, //获取后端接口地址
      isOpen: 0,
      list: [],
      value: '',
      reserveTime: [],
      reserveState: [],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //生成二维码
    generateQRCode() {
      integralGradeAPi.generateQRCode().then((response) => {
        this.$message({
          type: 'success',
          message: response.message,
        })
        this.$router.push('/core/integral-grade/list')
      })
    },

    //Excel数据导出
    exportData() {
      window.location.href = this.BASE_API + '/seat/download'
    },

    fetchData() {
      integralGradeAPi.list().then((response) => {
        this.list = response.data.list
      })
    },
    change(row) {
      console.log(row.seat.seaId)
      integralGradeAPi.updateReserveState(row.seat.seaId).then((response) => {
        this.$message({
          type: 'success',
          message: response.message,
        })
        this.$router.push('/core/integral-grade/list')
      })
    },
  },
}
</script>

<style scoped></style>
